/* 提供常用less函数
 date:2020-05-15
 */

//@import './variable.less';——webpack插件全局引入variable.less与mixin.less
/* TODO basic */
.border(@color:@border-color){border:1px solid @color;}
/* TODO margin */
.margin(@value:0 0 0 0){margin:@value;}
.marginTop(@value:0){margin-top:@value;}
.marginBottom(@value:0){margin-bottom:@value;}
.marginLeft(@value:0){margin-left:@value;}
.marginRight(@value:0){margin-right:@value;}
.padding(@value:0 0 0 0){padding:@value;}
.paddingTop(@value:0){padding-top:@value;}
.paddingBottom(@value:0){padding-bottom:@value;}
.paddingLeft(@value:0){padding-left:@value;}
.paddingRight(@value:0){padding-right:@value;}

/* TODO flex相关 */
/* todo 容器属性 */
/*主轴方向——flex-direction:row | row-reverse | column | column-reverse;*/
.flex-direction(@value:row){flex-direction:@value;}
/*flex-wrap:nowrap | wrap | wrap-reverse;*/
.flex-wrap(@value:nowrap){flex-wrap:@value;}
.flex-flow(@direction:row,@wrap:nowrap){flex-flow:@direction @wrap;}
/*justify-content: flex-start | flex-end | center | space-between | space-around;*/
.justify-content(@value:center){justify-content:@value;}
/*align-items: flex-start | flex-end | center | baseline | stretch;*/
.align-items(@value:center){align-items:@value;}
/*多轴align-content: flex-start | flex-end | center | space-between | space-around | stretch;*/
.align-content(@value:space-between){align-content:@value;}
/* todo 项目属性——用于flex子元素上 */
.order(@value:0){order:@value;}
.flex-grow(@value:0){flex-grow:@value;}
.flex-shrink(@value:0){flex-shrink:@value;}
/* flex-basis——元素占有的基础宽度，auto为元素本身大小 */
.flex-basis(@value:auto){flex-basis:@value;}
/*align-self: auto | flex-start | flex-end | center | baseline | stretch;，auto为继承父级align-items属性值*/
.align-self(@value:auto){align-self:@value;}
/*flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]——快捷键：auto (1 1 auto) 和 none (0 0 auto)*/
.flex(@grow:0,@shrink:0,@basis:auto){flex:@grow @shrink @basis;}
/* TODO button类——<button> */
.button-basis(@width:100%,@height:.32rem,@borderRadius:.04rem,@fontSize:.12rem,@color:@border-color,@backgroundColor:@primary-color)
{display:inline-block;text-align:center;line-height:@height;width:@width;height:@height;font-size:@fontSize;color:@color;border-radius:@borderRadius;background:@backgroundColor;box-sizing:border-box;
  // focus
  &:focus{outline:none;}
}
.button-small-basis(@color:@border-color,@backgroundColor:@primary-color){.button-basis(1rem,.34rem,.04rem,.12rem,@color,@backgroundColor);.border(yellow);}
.button-small-basis--not-border(@color:@border-color,@backgroundColor:@primary-color){.button-basis(1rem,.34rem,.04rem,.12rem,@color,@backgroundColor);border:none;}
.button-middle-basis(@color:@border-color,@backgroundColor:@primary-color){.button-basis(2rem,.34rem,.04rem,.12rem,@color,@backgroundColor);.border(yellow);}
.button-middle-basis--not-border(@color:@border-color,@backgroundColor:@primary-color){.button-basis(2rem,.34rem,.04rem,.12rem,@color,@backgroundColor);border:none;}
.button-large-basis(@color:@border-color,@backgroundColor:@primary-color){.button-basis(100%,.34rem,.04rem,.12rem,@color,@backgroundColor);.border(yellow);}
.button-large-basis--not-border(@color:@border-color,@backgroundColor:@primary-color){.button-basis(100%,.34rem,.04rem,.12rem,@color,@backgroundColor);border:none;}
/* TODO tag类 */
.tag-basis(@width:100%,@height:.32rem,@borderRadius:.04rem,@fontSize:.12rem,@color:@border-color,@backgroundColor:@primary-color)
{display:inline-block;text-align:center;line-height:@height;width:@width;height:@height;font-size:@fontSize;color:@color;border-radius:@borderRadius;background:@backgroundColor;box-sizing:border-box;}
.tag-instance-basis(@color:@border-color,@backgroundColor:@primary-color){.tag-basis(.8rem,.34rem,.4rem,.12rem,@color,@backgroundColor);border:none;}


